<template lang="pug">
  el-breadcrumb.app-breadcrumb(separator='/')
    transition-group(name='breadcrumb')
      el-breadcrumb-item(v-for='(item, index) in breadcrumbs' :key='item.path')
        span.no-redirect(v-if="item.redirect === 'noredirect' || index === breadcrumbs.length-1") {{ item.meta.title }}
        a(v-else @click.prevent='handleLink(item)') {{ item.meta.title }}
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { RouteRecord } from "vue-router";
import pathToRegexp from "path-to-regexp";

@Component
export default class Breadcrumb extends Vue {
  private breadcrumbs: RouteRecord[] = [];

  private created() {
    this.getBreadcrumb();
  }

  @Watch("$route")
  private onRouteChange() {
    this.getBreadcrumb();
  }

  private getBreadcrumb() {
    let matched = this.$route.matched.filter(item => item.name);
    const first = matched[0];
    if (first && first.name !== "首页") {
      matched = [{ path: "/", meta: { title: "首页" } } as RouteRecord].concat(
        matched
      );
    }
    this.breadcrumbs = matched.filter(item => {
      return item.meta && item.meta.title && item.meta.breadcrumb !== false;
    });
  }

  private pathCompile(path: string) {
    // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
    const { params } = this.$route;
    const toPath = pathToRegexp.compile(path);
    return toPath(params);
  }

  private handleLink(item: any) {
    const { redirect, path } = item;
    if (redirect) {
      this.$router.push(redirect);
      return;
    }
    this.$router.push(this.pathCompile(path));
  }
}
</script>

<style lang="scss" scoped>
@import "../../sass/variables";

.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 10px;

  .no-redirect {
    color: #333;
    cursor: text;
  }
}
.el-breadcrumb__separator {
  color: $blue;
}
</style>
